$(function () {
  class Details {
    constructor() {
      this._data = location.hash.split("=")[1]
      this.bda = null;
      this.container = $('.details .container')
      this.data = JSON.parse(decodeURI(this._data))
      this.goods_wrap = $('.details .goods-wrap')
      this.price = $('.tm-fcs-panel')
      this.goods_showpic = $('.goods_showpic .pics')
      this.cartbtn = $('.cart-btn')

      this.get_showDatas();
      this.render()

      this.active_span = $('.container .list .active_span .sp')
      console.log(this.data)
      this.img = $('.container .img');
      this.focus = $('.focus')
      this.big_content = $('.big-img')
      this.big_img = $('.big-img img')
      this._container = $('.container')
      this.show_img = $('.container .img img')

      //放大镜与焦点框的比例
      this.scale = 0.5;
      this.init()
      //获取
      this.c_off = {
        x: this._container.offset().left,
        y: this._container.offset().top
      }

      this.boundary = {
        x: {
          min: 0,
          max: this.img.width() - this.focus.width()
        },
        y: {
          min: 0,
          max: this.img.height() - this.focus.height()
        },
      }

      this.bindEvent();

    }
    init(){
      this.focus.width( 420 * this.scale )
      this.focus.height( 420 * this.scale )

      this.big_content.width(800 * this.scale)
      this.big_content.height(800 * this.scale)
    }
    get_showDatas() {
      let options = {
        url: '../../static/data/recommand9.json'
      }
      axios(options).then(res => {
        this.bda = res.data
        this.renderShowpic(res.data)
        const observer = lozad();
        observer.observe();
      })
    }
    render() {
      // console.log(this.bda);
      this.container.html(`
      <div class="img">
        <img src="${this.data.src}" alt="">
        <div class="focus"></div>
      </div>
      <div class="list">
        <div class="button-next"></div>
        <div class="button-prev"></div>
        <div class='active_span'>
          <span class="sp active">
            <img src="${this.data.src}" alt="">
          </span>
          <span class='sp'>
            <img src="//img.alicdn.com/bao/uploaded/i4/3477966857/O1CN01O9qg5A20WYV7Sq5h9_!!2-item_pic.png" alt="">
          </span>
          <span class='sp'>
            <img src="//img.alicdn.com/bao/uploaded/bao/upload/O1CN01e2682J1pMySbQCCYq_!!6000000005347-2-yinhe.png" alt="">
          </span>
          <span class='sp'>
            <img src="//img.alicdn.com/bao/uploaded/bao/upload/O1CN01fGDVpG1wPRudueLUn_!!6000000006300-2-yinhe.png" alt="">
          </span>
          <span class='sp'>
            <img src="//img.alicdn.com/bao/uploaded/bao/upload/O1CN01KoW9iR1qq7HMRB9r7_!!6000000005546-2-yinhe.png" alt="">
          </span>

        </div>
        
      </div>
      <div class="big-img">
        <img src="${this.data.src}" alt="">
      </div>
      `)
      this.goods_wrap.prepend(`
      <div class="goods-title">${this.data.title}</div>
      `)
      this.price.prepend(`
        <p class='goods-price'>
          <span>价格</span>
          <b>${this.data.price}</b>
        </p>
      `)

    }
    renderShowpic(data) {
      this.goods_showpic.html(data.map(item => `
        <img class='lozad' data-src='${item.imgUrl}'>
      `).join(''))
    }

    bindEvent() {
      this.img.on('mouseover', () => {
        this.show();
      })
      this.img.on('mouseout', () => {
        this.hide();
      })
      this.img.on('mousemove', e => {
        this.move(e.pageX, e.pageY)

      })
      this.active_span.each((index, item) => {
        $(item).on('click', () => {
          this.reset()
          item.classList.add('active')
          console.log(item);

          this.show_img.attr('src', $(item).find('img').attr('src'))
          this.big_img.attr('src', $(item).find('img').attr('src'))
        })
      })


    }
    reset() {
      this.active_span.each((index, item) => {
        item.classList.remove('active')
      })
    }
    show() {
      this.focus.css({
        display: 'block'
      })
      this.big_content.css({
        display: 'block'
      })
    }
    hide() {
      this.focus.css({
        display: 'none'
      })
      this.big_content.css({
        display: 'none'
      })
    }

    move(x, y) {
      x = x - this.c_off.x - (this.focus.width() / 2)
      y = y - this.c_off.y - (this.focus.height() / 2)

      x = x <= this.boundary.x.min ? this.boundary.x.min : x;
      x = x >= this.boundary.x.max ? this.boundary.x.max : x;

      y = y <= this.boundary.y.min ? this.boundary.y.min : y;
      y = y >= this.boundary.y.max ? this.boundary.y.max : y;


      this.focus.css({
        left: x + 'px',
        top: y + 'px'
      })
      this.big_img.css({
        // left: -x * (400 / 420) + "px",
        // top: -y * (400 / 420) + "px",
        left: -x * (800 / 420) + "px",
        top: -y * (800 / 420) + "px",
      })
    }

  }
  new Details()


})
$(function () {
  class Index {
    constructor() {
      this.defaultmsg = $('.nav-head .defaultmsg')
      this.data_num = null;
      this.showmsg = $('.showmsg')
      this.nickname = $('.showmsg .nickname')
      this.quitbtn = $('.showmsg .quit')
      this.id = cookie('ID');
      this.token = cookie('Token');
      this.cartbtn = $('.cart-btn')
      this.count = $('.amount .tb-text')
      this.price = $('.details .goods-price b')
      console.log(this.price.text().slice(1));
      this._price = Number(this.price.text().slice(1))
      this.show_img_src = $('.container .img img').attr('src')
      this.goods_title = $('.details .goods-wrap .goods-title').text()
      
      this.flat = false;
      if (this.id.length > 0 && this.token.length > 0) {
        this.defaultmsg.css({
          display: 'none'
        })
        this.showmsg.css({
          display: 'block'
        })
        this.getUserInfo()
      }

      this.bindEvent()
    }
    // getid(){
    //   if('ID' in this.Data){
    //     return true
    //   }else{
    //     return false
    //   }
    // }
    getUserInfo() {
      let options = {
        url: 'http://localhost:8888/users/info/' + this.id,
        headers: {
          "authorization": this.token
        }

      }

      $.ajax(options).then(res => {
        this.render(res)
      })
    }

    render(res) {
      this.nickname.text(res.info.nickname);
    }
    quitUser() {
      let options = {
        url: 'http://localhost:8888/users/logout/' + this.id,
      }

      $.ajax(options).then(res => {
        console.log('退出账户成功');
        cookie('ID', null)
        cookie('Token', null)
        setTimeout(() => {
          location.reload()
        }, 500)
      })
    }
    bindEvent() {
      this.quitbtn.on('click', () => {
        this.quitUser()
      })

      this.cartbtn.on('click', () => {
        this.flat = false
        if (this.id.length > 0 && this.token.length > 0) {
          // 购物车数组
          this.data_num = JSON.parse(localStorage.getItem('goods_msg'));

          let _datas = {
            goods_count: Number(this.count.val()),
            goods_single_price: this._price,
            goods_pic: this.show_img_src,
            goods_title: this.goods_title,
          }
          console.log(_datas);
          if (this.data_num === null) {
            this.data_num = []
            this.data_num.push(_datas)
            this.flat = !this.flat
          }
          else if(this.data_num !== null){
            for (let i = 0; i < this.data_num.length; i++){
              
              if (this.data_num[i].goods_pic === _datas.goods_pic) {
                this.data_num[i].goods_count++
                this.flat = !this.flat
              }
            }
          }
          if(!this.flat){
            this.data_num.push(_datas)
          }
          localStorage.setItem('goods_msg', JSON.stringify(this.data_num))
          location.href = '../../dist/cart.html'
        } else {
          alert('请先登录！！')
        }
      })
    }
  }
  new Index();
})